<template>
  <div class="echarts" ref="chart"></div>
</template>

<script >
// import EchartsThemeController from "./EchartsThemeController"
// import Theme from "../ThemeSetting/Theme"
import * as echarts from "echarts"
const defaultStyleData = ""

// const {echarts, objectList} = EchartsThemeController
export default {
	name: "Echarts",
  props: {
    id: {
      type: String,
      default: `echart-${Math.random().toFixed(4) * 10000}`,
    },
    option: {
      require: true,
      type: Object,
      default: () => ({})
    }
	},
  data() {
    return {
      myChart: null,
			styleId: defaultStyleData.id
    }
  },
	methods: {
    init(){
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart)
      // 指定图表的配置项和数据
      const {option, id} = this

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true)
      this.myChart = myChart
		},
  },
  mounted() {
    this.init()
  },
	beforeDestroy(){
		// const index = objectList.findIndex(item => item.id === this.id)
		this.myChart.dispose()
		// objectList.splice(index, 1)
	}
}

</script>

<style lang="less" scoped>
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>



